<template>
  <div class="home">
    <div class="content-div">
      <div class="image-title wow animate__animated animate__flipInY">
        <div class="ml10p">
          <ul class="title-list">
            <li>Where</li>
            <li>Your Goals Begin</li>
          </ul>
          <div class="rice-titile">
            无论您的交易经验或交易风格如何， 我们都有适合您需求的交易账户
          </div>
        </div>
      </div>
      <div class="STDcount mt150  wow animate__animated animate__zoomInUp">
        <div class="item">
          <ul>
            <li class="STD-title">STD标准账户</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
          </ul>
        </div>
        <div class="item mt-50 bgFFF vs">
          <ul>
            <li class="STD-title">VS</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
          </ul>
        </div>
        <div class="item">
          <ul>
            <li class="STD-title">STD标准账户</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
            <li class="STD-list">标准点差</li>
          </ul>
        </div>
      </div>
      <div class="four-step oh">
        <div class="content-title mt120">加入RI Full 仅需4步</div>
        <div class="rich-title">立即开启您的全球交易市场</div>
        <ul class="step-list-wrap">
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
          <li class="step-list">
            <div class="product-iocn">
              <img src="../../assets/images/product1.png" />
            </div>
            <div class="froex">Froex</div>
            <div class="product-link">外汇 >></div>
          </li>
        </ul>
        <div class="register-btn">即刻注册</div>
      </div>
      <div class="pay-method">
        <div class="soild_text_two">
          <hr />
          <span>支付方式</span>
          <hr />
        </div>
        <ul class="box">
          <li class="img-item">
            <img src="../../assets/images/invalid-name-1.png" />
          </li>
          <li class="img-item">
            <img src="../../assets/images/payment.png" />
          </li>
          <li class="img-item">
            <img src="../../assets/images/invalid-name.png" />
          </li>
          <li class="img-item">
            <img src="../../assets/images/invalid-name-2.png" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
.image-title {
  width: 100%;
  height: 730px;
  padding-top: 256px;
  box-sizing: border-box;
  background: url('../../assets/images/tradCount.png') center top no-repeat;
  background-size: 100% 100%;
}
.title-list {
  font-family: ACaslonPro-Regular;
  font-size: 64px;
  color: #ffffff;
  letter-spacing: 1.6px;
  line-height: 84px;
}
.rice-titile {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: justify;
  line-height: 40px;
  width: 570px;
}
.STDcount {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #ffffff;
  height: 650px;
}
.STDcount .item {
  width: 336px;
  height: 480px;
  background: #fcfcfc;
  box-shadow: 0 0 36px 2px rgba(195, 195, 195, 0.5);
  padding: 10px;
}
.STD-title {
  font-family: STZhongsong;
  font-size: 24px;
  color: #1e1e1e;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #c8161d;
  text-align: center;
  padding: 20px;
}
.STD-list {
  padding: 10px;
  border-bottom: 1px dashed #979797;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
}
.vs {
  box-shadow: 0 0 36px 2px rgba(195, 195, 195, 0.5) !important;
}
.four-step {
  width: 100%;
  height: 650px;
}
.step-list-wrap {
  display: flex;
  justify-content: center;
  height: 40%;
}
.step-list {
  width: 15.9%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 36px 2px rgba(195, 195, 195, 0.5);
  border-radius: 1px;
  border-radius: 1px;
  margin-right: 20px;
  margin-top: 40px;
}
.rich-title {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #1e1e1e;
  text-align: center;
  margin-top: 30px;
}
.register-btn {
  background: #1e2e70;
  border-radius: 20px;
  border-radius: 20px;
  width: 170px;
  height: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Light;
  line-height: 40px;
  margin: 70px auto;
}
.product-iocn {
  width: 70px;
  height: 70px;
  background-size: 100% 100%;
  margin: 60px auto 30px;
}
.product-iocn img {
  width: 70px;
  height: 70px;
}
.froex {
  font-family: STSongti-SC-Regular;
  font-size: 21px;
  color: #1e1e1e;
  text-align: center;
}
.product-link {
  color: #1e1e1e;
  text-align: center;
  margin-top: 20px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
}
.product-list-last {
  display: table;
}
.product-list-last .product-link {
  vertical-align: middle;
  display: table-cell;
}
.downs {
  width: 100%;
  height: 730px;
  background: url('../../assets/images/downs.png');
  background-size: 100% 100%;
}
.btn {
  width: 135px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 1px;
  border-radius: 1px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  margin: 20px auto;
  cursor: pointer;
}
.pay-method {
  background: #f7f7f7;
  height: 210px;
  overflow: hidden;
}
.soild_text_two {
  text-align: center;
  margin: 30px auto;
  height: 20px;
  font-family: STZhongsong;
  font-size: 22px;
  color: #1e1e1e;
}
span {
  padding: 0 10px;
}
hr {
  width: 400px;
  display: inline-block;
  vertical-align: middle;
  border-color: #979797;
}
.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.img-item img {
  margin-left: 100px;
}
</style>
